<template>
    <div class="content-box">
      <div class="content" style="border-radius: 6px">
        <el-tabs v-model="tavIndex" :tab-position="tabPosition" @tab-click="tabIndexChange">
          <el-tab-pane :label="item" v-for="(item,index) in labelList" :key="index">
            <div ref="searchBox" class="search-box flex" v-show="showSearch">
              <el-form
                :model="queryParams"
                ref="queryForm"
                :inline="true"
                label-width="100px"
              >
                <el-form-item 
                   label="产品名称"  
                   prop="productName"
                   v-if="['下游渠道贷超统计'].includes(item)"
                >
                   <el-input
                     v-model="queryParams.productName"
                     placeholder="请输入"
                     style="width: 240px; margin-right: 20px"
                     clearable
                   ></el-input>
               </el-form-item>
               <el-form-item
                  label="产品集合"
                  prop="productIds"
                  v-if="['下游渠道贷超统计'].includes(item)"
                >
                  <el-select
                    v-model="queryParams.productIds"
                    multiple
                    collapse-tags
                    clearable
                    filterable
                    placeholder="请选择"
                    style="width: 240px; margin-right: 20px"
                  >
                    <el-option
                      v-for="(item, index) in productOptionList"
                      :key="index"
                      :label="item.simpleName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="关联公司"
                  prop="companyIds"
                  v-if="['下游渠道贷超统计'].includes(item)"
                >
                  <el-select
                    v-model="queryParams.companyIds"
                    multiple
                    collapse-tags
                    clearable
                    filterable
                    placeholder="请选择"
                    style="width: 240px; margin-right: 20px"
                  >
                    <el-option
                      v-for="(item, index) in downCompanyOptionList"
                      :key="index"
                      :label="item.companyName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="在线状态"
                  prop="status"
                  v-if="['下游渠道贷超统计'].includes(item)"
                >
                  <el-select
                    v-model="queryParams.status"
                    clearable
                    filterable
                    placeholder="请选择"
                    style="width: 240px; margin-right: 20px"
                  >
                    <el-option
                      v-for="(item, index) in statusOptionList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item 
                  v-if="['下游渠道贷超统计'].includes(item)"
                  label="产品管理员" prop="manageUserIds">
                  <el-select
                    v-model="queryParams.manageUserIds"
                    multiple
                    collapse-tags
                    clearable
                    filterable
                    placeholder="请选择管理人"
                    style="width: 240px; margin-right: 20px"
                  >
                    <el-option
                      v-for="(item, index) in manageOptionList"
                      :key="index"
                      :label="item.userName"
                      :value="item.userId"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="统计时间" 
                  prop="countTimeRange"
                  v-if="['下游渠道贷超统计'].includes(item)"
                  >
                  <el-date-picker
                    :style="{width: device === 'mobile'? '280px' :'355px', marginRight: '20px'}"
                    clearable
                    v-model="countTimeRange"
                    type="datetimerange"
                    range-separator="至"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="产品"
                  prop="productId"
                  v-if="['下游渠道贷超记录'].includes(item)"
                >
                  <el-select
                    v-model="queryParams.productId"
                    clearable
                    filterable
                    placeholder="请选择"
                    style="width: 240px; margin-right: 20px"
                  >
                    <el-option
                      v-for="(item, index) in productOptionList"
                      :key="index"
                      :label="item.simpleName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="是否计费"
                  prop="isFee"
                  v-if="['下游渠道贷超记录'].includes(item)"
                >
                  <el-select
                    v-model="queryParams.isFee"
                    clearable
                    filterable
                    placeholder="请选择"
                    style="width: 240px; margin-right: 20px"
                  >
                    <el-option
                      v-for="(item, index) in isFeeOptionList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="点击时间" 
                  prop="checkTimeRange"
                  v-if="['下游渠道贷超记录'].includes(item)"
                  >
                  <el-date-picker
                    :style="{width: device === 'mobile'? '280px' :'355px', marginRight: '20px'}"
                    clearable
                    v-model="checkTimeRange"
                    type="datetimerange"
                    range-separator="至"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    plain
                    >查询</el-button
                  >
                  <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                  >
                  <el-button
                    type="success"
                    size="mini"
                    @click="exportExcel(item)"
                    >导出</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <div class="table-box" style="padding-top: 0;">
              <el-row :gutter="10" class="mb8">
                <right-toolbar
                  :showSearch.sync="showSearch"
                  @queryTable="handleQuery"
                  :columns="columns"
                ></right-toolbar>
              </el-row>
              <el-table
                v-sticky-header="{offsetTop: '-5px'}"
                ref="table"
                v-loading="loading"
                :data="dataList"
              >
                <template v-for="(item,index) in columns">
                  <el-table-column
                    :key="item.prop"
                    :label="item.label"
                    :prop="item.prop"
                    :width="getColumnWidth(index)"
                    align="center"
                    :fixed="item.fixed"
                    :sortable="item.sortable ? item.sortable : false"
                    :show-overflow-tooltip="item.showTooltip"
                    v-if="item.visible"
                  >
                  </el-table-column>
                </template>
              </el-table>
              <!-- 使用分页插件 -->
              <pagination
                v-show="total > 0"
                :total="total"
                :page-sizes="[10, 50, 100, 200, 500]"
                :page.sync="queryParams.pageIndex"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </template>
  <script>
  import { querySysUserManageList } from "@/api/system/userManage";
  import { getDwnCompanyList } from "@/api/business/downCompanyManagement";
  import {queryProductList} from "@/api/business/downdAvertManagement"
  import {
    queryAdvertCountByPage,
    queryAdvertListByPage
  } from '@/api/dataCenter/advertRecord'
  import tableStickyMixins from "@/mixins/tableStickyMixins";
  import { mapGetters } from "vuex";
  import moment from "moment";
  
  export default {
    // 定义名字用于标识该组件是否被keep-alive缓存
    name: "AdvertRecord",
    data() {
      return {
        // 列表数据
        dataList: [],
        // 在线状态
        statusOptionList:[
          { label: "在线",value: 0, },
          { label: "下线",value: 1, },
          { label: "停用",value: 2, },
        ],
        // 管理人筛选项
        manageOptionList: [],
        // 下游公司筛选项
        downCompanyOptionList: [],
       
        // 产品筛选项
        productOptionList: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageIndex: 1,
          pageSize: 10,
          // 默认当日数据
          range:0
        },
        // 是否计费筛选项
        isFeeOptionList:[
            { label: "是",value: 1, },
            { label: "否",value: 0, },
        ],
        // 统计时间范围
        countTimeRange: [],
        // 点击时间范围
        checkTimeRange:[],


        loading: false,
        // 表格列信息
        columns: [],
        // 显示搜索栏
        showSearch: true,
        // 当前tab激活项
        tavIndex:'0',
        // label集合
        labelList:[
          "下游渠道贷超统计",
          "下游渠道贷超记录",
        ],
        // 分页查询方法集合
        pageMethodsList:[
          queryAdvertCountByPage,
          queryAdvertListByPage,
        ],
      };
    },
    mixins: [tableStickyMixins],
    created() {
      this.getManageList();
      this.getCompanyOptionList();
      this.getChannelList()
      this.init();
    },
    watch: {
      'device':{
        handler() {
          // 重新设置列表信息
          this.$set(this,'columns',this.tavIndex === '0'?this.pickCountColumnsList:this.pickListColumnsList)
          // 对 Table 进行重新布局
          this.$refs.table[this.tavIndex].doLayout();
        },
        deep: true,
      }
    },
    computed: {
      ...mapGetters(["sidebar", "device"]),
      // 计算当前列元素在所处环境的宽度
      getColumnWidth() {
        return (index) => {
          return this.isMobile
            ? this.columns[index].mobileWidth
            : this?.sidebar?.opened
            ? this.columns[index].pcWidth - this.slightWidth
            : this.columns[index].pcWidth + 17;
        };
      },
      // 计算当前el-tabs位置形式
      tabPosition(){
        return this.device === 'mobile'? 'top': 'left'
      },
      // 采量统计表格信息计算属性
      pickCountColumnsList(){
        return [
          { label: `上游公司名称`,prop: "companyName",visible: true,pcWidth: 200,mobileWidth: 100,fixed: 'left',showTooltip: true,},  
          { label: `产品名称`,prop: "productName",visible: true,pcWidth: 200,mobileWidth: 100,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,},
          { label: `产品简称`,prop: "simpleName",visible: true,pcWidth: 180,mobileWidth: 100,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,},
          { label: `采量模式`,prop: "pickTypeStr",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `计费模式`,prop: "feeTypeStr",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `单价`,prop: "priceMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `计费总数`,prop: "feeAll",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `不计费总数`,prop: "unFeeAll",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `采量总数`,prop: "pickAll",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `计费金额`,prop: "feeMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `管理员`,prop: "manageUserName",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        ]
      },
      // 采量记录表格信息计算属性
      pickListColumnsList(){
        return [
          { label: `上游公司名称`,prop: "companyName",visible: true,pcWidth: 200,mobileWidth: 100,fixed: 'left',showTooltip: true,},  
          { label: `产品名称`,prop: "productName",visible: true,pcWidth: 200,mobileWidth: 100,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,},
          { label: `产品简称`,prop: "simpleName",visible: true,pcWidth: 180,mobileWidth: 100,fixed: this.device === 'mobile'? null: 'left',showTooltip: true,},
          { label: `采量模式`,prop: "pickTypeStr",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `计费模式`,prop: "feeTypeStr",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `数据模式`,prop: "dataTypeStr",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `是否计费`,prop: "isFeeStr",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `单价金额`,prop: "priceMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `计费金额`,prop: "feeMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `备注`,prop: "remarks",visible: true,pcWidth: 150,mobileWidth: 100,fixed: null,showTooltip: true,},
          { label: `点击时间`,prop: "checkTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `注册时间`,prop: "enrollTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `表单时间`,prop: "submitTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
          { label: `管理员`,prop: "manageUserName",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        ]
      }
    },
    methods: {
      init() {
        // 初始化时间
        this.$set(this, "countTimeRange", [
          moment().format("YYYY-MM-DD 00:00:00"),
          moment().format("YYYY-MM-DD 23:59:59"),
        ]);
        // 设置点击时间
        this.$set(this, "checkTimeRange", [
          moment().format("YYYY-MM-DD 00:00:00"),
          moment().format("YYYY-MM-DD 23:59:59"),
        ]);
        // 初始化列表信息
        this.$set(this,'columns',this.tavIndex === '0'?this.pickCountColumnsList:this.pickListColumnsList)
        this.getList();
      },
      exportExcel(name){
         if(name === '下游渠道贷超统计'){
            if (this.countTimeRange?.length) {
             this.queryParams.countTimeStart = this.countTimeRange[0];
             this.queryParams.countTimeEnd = this.countTimeRange[1];
           } else {
             delete this.queryParams.countTimeStart;
             delete this.queryParams.countTimeEnd;
           }
           this.download('/down/advertRecord/v1.0.0/exportAdvertCountList',this.queryParams,`${name}信息表_${new Date().getTime()}.xlsx`)
         }else{
           if(this.checkTimeRange?.length){
            this.queryParams.checkTimeStart = this.checkTimeRange[0];
            this.queryParams.checkTimeEnd = this.checkTimeRange[1];
           }else{
             delete this.queryParams.checkTimeStart;
             delete this.queryParams.checkTimeEnd;
           }
           this.download('/down/advertRecord/v1.0.0/queryAdvertRecordExportList',this.queryParams,`${name}信息表_${new Date().getTime()}.xlsx`)
         }
      },
      // 切换tab回调
      tabIndexChange(){
        console.log('索引',this.tavIndex);
        // 设置表信息
        this.$set(this,'columns',this.tavIndex === '0'?this.pickCountColumnsList:this.pickListColumnsList)
        // 组件被激活重新设置微调参数
        this.changeSlightWidth()
         // 重置初始查询条件并重新查询
         this.resetQuery()
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        if (this.countTimeRange?.length) {
          this.queryParams.countTimeStart = this.countTimeRange[0];
          this.queryParams.countTimeEnd = this.countTimeRange[1];
        } else {
          delete this.queryParams.countTimeStart;
          delete this.queryParams.countTimeEnd;
        }
        if(this.checkTimeRange?.length){
          this.queryParams.checkTimeStart = this.checkTimeRange[0];
          this.queryParams.checkTimeEnd = this.checkTimeRange[1];
        }else{
          delete this.queryParams.checkTimeStart;
          delete this.queryParams.checkTimeEnd;
        }
        // console.log('查询参数',this.queryParams);
        this?.pageMethodsList[this.tavIndex](this.queryParams).then((response) => {
          this.dataList = response?.data?.list
          this.total = response?.data?.total;
          this.loading = false;
        }).catch((err) => {
          setTimeout(() => {// 延迟2s后自动取消加载状态
            this.loading = false;
          }, 2000);
        })
      },
      // 获取管理人列表
      getManageList() {
        querySysUserManageList().then((res) => {
          this.manageOptionList = res?.data;
        });
      },
      // 获取公司筛选项列表
      getCompanyOptionList() {
        // 获取下游公司列表
        getDwnCompanyList().then((res) => {
          this.downCompanyOptionList = res.data;
        });
      },
      // 获取渠道筛选项列表
      getChannelList(){
        // 获取上游渠道列表
        queryProductList().then((res) => {
          this.productOptionList = res.data;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.$set(this.queryParams, "pageIndex", 1);
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // 完全重置到初始状态
        this.$set(this, "queryParams", {
          pageIndex: 1,
          pageSize: 10,
          // 默认当日数据
          range:0
        });
        // 重置时间范围
        this.$set(this, "countTimeRange", [
            moment().format("YYYY-MM-DD 00:00:00"),
            moment().format("YYYY-MM-DD 23:59:59"),
        ]);
        this.$set(this,'checkTimeRange',[
            moment().format("YYYY-MM-DD 00:00:00"),
            moment().format("YYYY-MM-DD 23:59:59"),
        ])
        this.init();
      },
    },
  };
  </script>
  
  <style scoped lang='scss'>
  .search-box {
    padding: 20px 20px 0;
    background: #fff;
    align-items: flex-start;
    border-radius: 6px;
  }
  .search-area {
    position: absolute;
    right: 20px;
  }
  .content {
    // min-height: 100%;
    padding: 20px;
    background: #fff;
  }
  .el-table {
      // 滚动条加粗
      --scrollbar-height: 9px;
  }
  ::v-deep .el-tabs__content{
    height: calc(100vh - 166px);
    overflow-y: auto;
  }
  </style>